<!-- 1.组件dom块 -->
<template>
  <div class="register">
    <el-form
      class="register_form"
      ref="register_form"
      :model="register_form"
      label-width="80px"
      :rules="rules"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="register_form.userName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码"prop="Pass">
        <el-input
          type="password"
          v-model="register_form.password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input
          type="password"
          v-model="register_form.checkPassword"
          placeholder="请输确认密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱" prop="email">
        <el-input
                v-model="register_form.email"
                placeholder="请输入电子邮箱"
        ></el-input>
      </el-form-item>

      <div v-show="registerType==1?false:true"></div>
      <el-form-item>
        <el-button type="primary" @click="onRegister">立即注册</el-button>
        <el-button @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<!-- 2.逻辑代码块 -->
<script>
export default {
  name: "register",
  props: {
    registerType: {
      type: Number,
      default: 1,
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (this.register_form.password == '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.register_form.checkPassword !== '') {
          this.$refs.register_form.validateField('checkPassword');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (this.register_form.checkPassword =='') {
        callback(new Error('请再次输入密码'));
      } else if (this.register_form.checkPassword!== this.register_form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    var checkEmail = (rule, value, callback) => {
      const reg = /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/;
      if (value == '' || value == undefined || value == null) {
        callback('请输入邮箱地址');
      } else {
        if (!reg.test(value)) {
          callback(new Error('请输入正确的邮箱地址'));
        } else {
          callback();
        }
      }

    };
    return {
      register_form: {
        userName:'',
        password:'',
        checkPassword:'',
        email:'',
      },
      rules:{
        userName: [
          { required: true,  trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2到 4 个字符', trigger: 'blur' }
        ],
        Pass: [
          { required: true, validator:validatePass,  trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6到 12个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, validator:validatePass2, trigger: 'blur' },
          { min: 6, max: 12, message: '长度在 6到 12 个字符', trigger: 'blur' }
        ],
        email:[
          { required: true, validator:checkEmail, trigger: 'blur' },
        ]
      },
    };
  },
  methods: {
    onRegister() {
      this.$refs.register_form.validate(async valid=>{
        if (!valid) return;
        if(this.registerType===2){
          const {data:res}=await this.$http.post("admin/addMangerUser",this.register_form);
          if(res!="success"){
            return this.$message.error("注册失败！！！")
          }
          this.$message.success("注册成功！！！");
          this.$emit("onClose",true);
        }else{
          const {data:res}=await this.$http.post("addUser",this.register_form);
          if(res!="success"){
            return this.$message.error("注册失败！！！")
          }
          this.$message.success("注册成功！！！");
          this.$emit("onClose",true);
        }
      });
    },
    onClose(id) {
      this.$emit("onClose",true);
    },
  },
};

</script>

<!-- 3.样式块 -->
<style scoped>
</style>